<template>
    <div class="banner">
            <el-carousel indicator-position="outside" arrow="never" :width="wid" :height="heig">
            <el-carousel-item v-for="item in list" :key="item" :style="item.url">
                <div class="w"></div>
            </el-carousel-item>
        </el-carousel>
    </div>
    <div class="text">
        <div class="w">
            <div class="content" :width="wid" :height="heig">

            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'

export default defineComponent({
    setup() {
        const list = reactive([
            {
                url: 'background-image: url(http://www.gzoaktreeinv.com/wp-content/uploads/2021/12/banner1.png)',
                title: '标题1'
            },
            {
                url: 'background-image: url(http://www.gzoaktreeinv.com/wp-content/uploads/2021/12/banner2.png)',
                title: '标题2'
            },
            {
                url: 'background-image: url(http://www.gzoaktreeinv.com/wp-content/uploads/2022/01/IST_24519_00013-scaled.jpg)',
                title: '标题3'
            },
            {
                url: 'background-image: url(http://www.gzoaktreeinv.com/wp-content/uploads/2022/01/5d6994cf9b14a53ad153c001a90f4790-scaled.jpg)',
                title: '标题4'
            },
        ])
            const wid = document.body.offsetWidth +"px"
            const heig = document.body.offsetHeight + "px"
            
        return {
            list,
            wid,
            heig
        }
    }
})
</script>

<style scoped lang="scss">
.banner {
    overflow: hidden;
    .el-carousel {
        .el-carousel__container {
            .el-carousel-item {
                display: flex;
                color: #475669;
                margin: 0;
            }
        }
    }
}
.content{
    // height: 500px;
    // width: 600px;
    background-color: #00783D;
}
div /deep/ .el-carousel__indicators {
    position: absolute;
    left: 10%;
    bottom: 3%;
}
div /deep/ .el-carousel__button {
    height: 10px;
    background-color: rgb(255, 255, 255);
    opacity:1
}

div /deep/ .is-active .el-carousel__button {
    background-color: #00783D;
    width: 60px;
}
</style>